<template>
  <view class="detail-container">
    <uni-nav-bar left-icon="back" @clickLeft="gotoBack" color="#fff" status-bar="true" :border="false"
      background-color="transparent" left-width="20px">
      <view style="line-height: 44px;">
        <navigator url="/pages/index/index" open-type="switchTab">
          <uni-icons type="home-filled" color="#fff" size="22"></uni-icons>
        </navigator>
      </view>
    </uni-nav-bar>
    <view class="card-edit-container" :class="{'showMessage':cardStatus}" @click="changePanel">

      <view class="car-item upload-img-container">
        <image :src="'http://'+(cardDetail.frontPostcardUrl || cardDetail.postcard.frontImgUrl)" mode="widthFix"
          style="width: 100%;" @load="handleImageHeight"
          v-if="(cardDetail.frontPostcardUrl || cardDetail.postcard.frontImgUrl)">
        </image>
        <view class="record-btn" @click.stop="playBgm" v-if="haveBgm" :style="style" :class="{'recording':isPlaying}">
          <view>
            <image src="../../static/shiting.png" v-if="!isPlaying"></image>
            <image src="../../static/zanting.png" v-else></image>
          </view>
        </view>
      </view>
      <view class="car-item enter-message-container" :style="{'height': imgHeight}">
        <!-- <view class="friend-name">{{cardDetail.sending}}:</view> -->
        <view class="message-content" style="height: 100%;">
          <template>

            <image :src="'http://'+cardDetail.letterContentUrl" v-if="cardDetail.letterContentUrl"
              style="height:100%;max-width: 100%;" mode="aspectFit">
            </image>
          </template>
          <view style="margin-top: 30rpx;" v-if="cardDetail.soundUrl">
            <view class="play-voice-container" @click.stop="playBgm">
              <view class="play-voice">
                <image src="../../static/shiting.png" mode="widthFix" v-if="!isPlaying"></image>
                <image src="../../static/zanting.png" mode="widthFix" v-else></image>
              </view>
            </view>
          </view>

        </view>
        <!-- <view class="mine-name">
          {{cardDetail.sign}}
        </view> -->
      </view>
      <view v-if="isEempty" style="padding-top:80px;color:#fff;text-align: center;">亲,明信片已被主人删除了~</view>
    </view>

    <view class="tips" @click="changePanel" v-if="isFirstClick">
      点击卡片翻面，我还有话对你说
    </view>
    <view v-else class="flex flex-between" style="margin-top: 160rpx;">
      <button type="default" @click="replay" v-if="showReplay">给TA回信</button>
    </view>
    <button type="default" @click="print" style="width: 60%;margin-top: 20rpx;" v-if="canPrint">去打印</button>
  </view>
</template>

<script>
  const innerAudioContext = uni.createInnerAudioContext();
  import {
    getUserPostcardList
  } from '@/apis/postcard.js'
  import {
    addCollect
  } from '@/apis/user.js'
  import {
    getQueryVarible
  } from '@/common/utils.js'
  export default {
    data() {
      return {
        haveBgm: false,
        cliperImg: "",
        cardStatus: 0,
        isFirstClick: true,
        cardDetail: {
          firendName: '测试',
          mineName: '测试',
          voice: '',
          content: ''
        },
        style: `--percent:0`,
        imgHeight: '100%',
        isPlaying: false,
        showReplay: false,
        isEempty: false
      }
    },
    computed: {
      canPrint() {
        const userId = uni.getStorageSync('userinfo').userId
        return this.cardDetail?.userId == userId
      }
    },
    onLoad(options) {
      this.postcardId = options.postcardId;
      const replay = options.replay
      if (options.q) {
        const q = decodeURIComponent(options.q)
        let queryObj = getQueryVarible(q)
        this.postcardId = queryObj.postcardId
        this.showReplay = true
      }
      if (replay) {
        this.showReplay = true
      }
      this.getCardDetail(this.postcardId)
    },
    onUnload() {
      innerAudioContext.stop();
      this.isPlaying = false
    },
    methods: {
      gotoBack() {
        uni.navigateBack()
      },
      replay() {
        getApp().globalData.replyUserId = this.cardDetail.userId;
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      print() {
        uni.navigateTo({
          url: '/pages/share/share?postcardId=' + this.postcardId,
        })
      },
      getCardDetail(postcardId) {
        getUserPostcardList({
          id: postcardId
        }).then(res => {
          if (res.rows) {
            const cardInfo = res.rows[0] || {};
            this.isEempty = res.rows.length == 0
            this.cardDetail = cardInfo
            if (cardInfo.soundUrl) {
              this.haveBgm = cardInfo.soundUrl;
              setTimeout(() => {
                this.playBgm()
              }, 1000)
            }

          }
        })
      },
      changePanel() {
        if (this.isEempty) {
          return;
        }
        this.isFirstClick = false;
        this.cardStatus = this.cardStatus == 0 ? 1 : 0
      },
      saveCard() {
        let userinfo = uni.getStorageSync('userinfo');
        if (!userinfo) {
          uni.showModal({
            content: '请登录收藏',
            confirmText: '确定',
            cancelText: '取消',
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/pages/login/login'
                })
              }
            }
          })
          return;
        }
        addCollect({
          userId: userinfo.userId + '',
          id: this.postcardId,
          status: 1
        }).then(res => {
          if (res.code == 200) {
            this.$showtoast('收藏成功')
          }
        })
      },

      playBgm() {
        if (!this.isPlaying) {
          this.isPlaying = true;
          innerAudioContext.src = 'http://' + this.cardDetail.soundUrl;
          innerAudioContext.play()
          innerAudioContext.onEnded(() => {
            this.isPlaying = false
          })

        } else {
          this.isPlaying = false;
          innerAudioContext.pause()
        }
      },
      handleImageHeight(event) {
        const query = uni.createSelectorQuery()
        query.select('.upload-img-container').boundingClientRect().exec(res => {
          this.imgHeight = res[0].height + 'px'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail-container {
    height: 100vh;
    background: darkcyan;
  }

  .card-edit-container {
    margin: 100rpx auto;
    width: 600rpx;
    height: 735rpx;
    perspective: 1000;
    font-family: cursive, fangsong, ui-monospace;

    .car-item {
      width: 557rpx;
      padding: 20rpx;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 1s;
      backface-visibility: hidden;
      background: #fff;
      border-radius: 10rpx;
    }

    .enter-message-container {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      transform: rotateY(-180deg);
    }

  }

  .showMessage .enter-message-container {
    transform: rotateY(0deg);
  }

  .showMessage .upload-img-container {
    transform: rotateY(-180deg);
  }

  .tips {
    margin: 0 auto;
    width: 80%;
    height: 90rpx;
    line-height: 90rpx;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 90rpx;
    text-align: center;
    color: #fff;
  }

  .upload-img-container .record-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 140rpx;
    height: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4bc7bd;
    border-radius: 50%;
    margin: 30rpx auto;
    margin-top: 80rpx;
  }

  .upload-img-container .record-btn>view {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #4bc7bd;
    border-radius: 50%;
    position: relative;
    z-index: 2;
  }

  .upload-img-container .record-btn image {
    width: 50%;
    height: 50%;
  }

  .upload-img-container .recording::after {
    width: 98rpx;
    height: 98rpx;
  }

  .friend-name {
    font-size: 38rpx;
  }

  .mine-name {
    text-align: right;
  }

  .save-card {
    background-color: #fff;
    color: #6bd6cc;
  }

  .play-voice-container {
    margin: 0 auto;
    height: 75rpx;
    width: 400rpx;
    position: relative;
    border-radius: 75rpx;
    border: 1px solid #4bc7bd;
    background: url('');
    background-size: contain;
    background-position: 0 50%;
    background-repeat: no-repeat;
  }

  .play-voice {
    width: 110rpx;
    height: 75rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #6bd6cc;
    border-radius: 75rpx;
    float: right;

    image {
      width: 50rpx;
      height: 50rpx;
    }
  }
</style>